<template>
  <div class="player">
    <div class="left">
      <img class='disc' src="@/assets/img/disc.png" alt="">
      <img class='cover' :src="albumImgSrc" alt="">
    </div>
    <div class="right">
      <div class="title"><img src="@/assets/img/tag.png" alt=""><span>{{ songName }}</span> </div>
      <div class="singer">歌手: <span>{{ singerAr | singerName }}</span></div>
      <div class="album">所属专辑: <span>{{ albumName }}</span></div>
      <audio class='audio' controls :src="songUrl"></audio>
      <div class='lyric-container'>
        <ul>
          <li class='lyric' v-for="(item,index) in lyric " :key="'lyric'+index">{{ item }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data(){
    return{
      bScroll:'',
      albumImgSrc:'',
      albumName:'',
      singerAr:'',
      songName:'',
      songUrl:'',
      lyric:[],
    }
  },
  async created(){
    // 获取歌词信息
    const gc = await this.$axios.get('/lyric?id='+this.$route.params.id)
    if(gc.data !== undefined){
      this.lyric = gc.data.lrc.lyric.split('\n')
    }else{
      this.lyric = gc.lyric.split('\n')
    }
    // 去掉[00:00.000]
    for (let i = 0; i < this.lyric.length; i++) {
            this.lyric[i] = this.lyric[i].slice(11);
        }

    // 获取歌曲信息
    const song = await this.$axios.get('/song/detail?ids='+this.$route.params.id)
    console.log(song)
    if(song.data !== undefined){
      // 封面地址
      this.albumImgSrc = song.data.songs[0].al.picUrl
      // 专辑名
      this.albumName = song.data.songs[0].al.name
      // 歌手
      this.singerAr = song.data.songs[0].ar
      // 歌名
      this.songName = song.data.songs[0].name
    } 

    // 获取播放地址
    const songUrl = await this.$axios.get('song/url?id='+this.$route.params.id)
    if(songUrl.data !== undefined){
      this.songUrl = songUrl.data.data[0].url
    }else{
      this.songUrl = songUrl.url
    }
  },
  // 过滤器
  filters:{
    singerName(singerMsg){
      const arr =[]
      for(let i =0;i<singerMsg.length;i++){
        arr[i] = singerMsg[i].name
      }
      return arr.join(' ') 
    }
  },
}

</script>

<style scoped>
@import '@/assets/css/player.css';
</style>